<template>
  <div>
    <a-tabs default-active-key="1" size="large">
      <a-tab-pane key="1" tab="文体活动">
        <div class="cFimg1">
          <div
            class="oEimg-txt5"
            v-for="(item, index) in LatestList"
            :key="index"
            @click="$router.push('/activity/activityDetails?iscenter=true&id=' + item.eventNo)"
          >
            <div class="oEimage4">
              <img :src="imageWebUrl + item.cover" @error="$event.target.src = GLOBAL.defaultCover" alt="" />
            </div>
            <img v-if="item.eventStatus != 5" class="image2" src="@/assets/image/icon_conduct.png" alt="" />
            <img v-else class="image2" src="@/assets/image/icon_End.png" alt="" />
            <span class="oEspan9" style="margin-left: 16px">{{
                item.title
              }}</span>
            <!-- <div style="display: flex; align-items: baseline; margin-top: 2px">
            <span class="oEspan10"
                ><img
                src="@/assets/image/employment/place.png"
                width="20"
                alt=""
                />&nbsp;&nbsp;{{ item.eventDate }}</span
            >

            <span class="aLspan3" v-if="item.eventStatus">{{
                item.eventStatus == 1?'未开始':item.eventStatus == 2?'进行中':item.eventStatus == 3?'已结束':item.eventStatus == 4?'报名中':''
            }}</span>
            </div>
            <span class="oEspan10"
            ><img
                src="@/assets/image/employment/place.png"
                width="20"
                alt=""
            />&nbsp;&nbsp;{{ item.address }}</span
            > -->

            <div class="aLbottom">
              <span class="aLspan1" v-if="item.tag">#{{ item.tag.split('，').join(" #") }}</span>
              <!-- <span class="aLspan2" v-show="item.browseNum"
                  ><img
                  src="@/assets/image/employment/views.png"
                  width="16"
                  alt=""
                  />&nbsp;&nbsp;{{ item.browseNum }}</span
              > -->
            </div>
          </div>
          <a-empty
            :image="imgUrl"
            :image-style="{
          height: '220px',
          }"
            style="margin: 0 auto; margin-top: 30px"
            v-if="LatestList.length == 0 && flag"
          />
        </div>
        <!-- 分页器 -->
        <div style="margin: 0 auto;">
          <a-pagination
            style="text-align: center; margin-top: 30px"
            v-model="pageIndex"
            :hideOnSinglePage="true"
            :total="total"
            :pageSize="pageSize"
            show-less-items
            @change="fontnbr"
          />
        </div>
      </a-tab-pane>
    </a-tabs>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
export default {
    data(){
        return {
            imgUrl: require("@/assets/image/pagint.png"),
            LatestList:[],
            userNo:"user01",
            total:0,
            pageSize:6,
            pageIndex:1,
            flag:false,
            onLoading:false
        }
    },
    mounted(){
        this.getActivityList();
    },
    methods:{
        fontnbr(e){
          this.pageIndex = e;
          this.getActivityList();
        },
        getActivityList(){
            this.onLoading = true
            this.$ajax({
                url:"/entrepreneurial/eventsignup/userSingupList?userNo="+this.userNo+"&pageSize="+this.pageSize+"&pageIndex="+this.pageIndex,
                method:"post",
            }).then((res)=>{
                this.flag = true;
                if(res.code == 200){
                    this.onLoading = false
                    this.LatestList = res.data.list;
                    this.total = res.data.totalCount;
                }else{
                    this.onLoading = false
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
.cFimg1 {
  width: 100%;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 70px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  //改变方向
  align-items: center;
  .cFspan2 {
    width: 48px;
    display: block;
    overflow-wrap: break-word;
    color: #de1e1e;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    white-space: nowrap;
    line-height: 30px;
    padding-left: 17px;
  }
    .oEimg-txt5:nth-child(3n+1){
        margin-left: 0;
    }
}
.oEimg-txt5 {
  width: 268px;
  background-color: rgb(255, 255, 255);
  margin-left: 40px;
  position: relative;
  cursor: pointer;
  &:first-child {
    margin-left: 0px;
  }
  .image2 {
    width: 91px;
    height: 78px;
    position: absolute;
    top: 0px;
    left: 0px;
  }
}
.oEimage4 {
  width: 268px;
  height: 154px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s linear;
  }
  img:hover {
    transform: scale(1.1, 1.1);
  }
}
.oEspan9 {
  display: block;
  overflow-wrap: break-word;
  color: #000000;
  font-size: 16px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 22px;
  text-align: justify;
  align-self: center;
  margin-top: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s linear;
}
.oEspan9:hover {
  color: @theme;
}
.oEspan10 {
  display: block;
  overflow-wrap: break-word;
  color: #999999 100%;
  font-size: 12px;
  font-family: PingFangSC-Regular;
  white-space: nowrap;
  padding-left: 17px;
  margin-top: 8px;
  width: 258px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aLspan3 {
  background-color: rgba(255, 149, 77, 1);
  margin-right: 15px;
  padding: 5px 5px;
  font-size: 10px;
  color: #ffffff;
  font-family: PingFangSC-Regular;
}
.aLbottom {
  width: 268px;
  height: 40px;
  border: #cccccc;
  border-top: #dedede solid 1px;
  margin-top: 17px;
  display: flex;
  .aLspan1 {
    float: left;
    width: 125px;
    overflow: hidden;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    padding-top: 10px;
    text-align: left;
    padding-left: 17px;
    flex: 1;
  }
  .aLspan2 {
    float: right;
    display: block;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    padding-top: 10px;
    margin-right: 8px;
  }
}
</style>
